import React, { useState, useEffect } from 'react';
import { getFans } from '../../api/userApi';
import User from '../User';
import { useMatch } from 'react-router-dom';

const MyFollowers = () => {
  const [followers, setFollowers] = useState([]);  // 初始化为空数组
  const [loading, setLoading] = useState(true);      // 加载状态
  const [error, setError] = useState(null);          // 错误状态

  // 使用 useMatch 来提取 userId 参数
  const match = useMatch("/mypage/followers/:userId");
  const userId = match ? match.params.userId : null;

  // 当 userId 改变时，重新请求数据
  useEffect(() => {
    if (userId) {
      setLoading(true);  // 请求开始时，设置加载状态
      getFans(userId)
        .then((data) => {
          setFollowers(data);  // 成功获取数据后，更新 followers
          setLoading(false);    // 请求完成，更新加载状态
        })
        .catch((error) => {
          setError('Error fetching followers: ' + error.message);  // 发生错误时，设置错误信息
          setLoading(false);  // 请求完成，更新加载状态
        });
    } else {
      setError("User ID is invalid or undefined.");
      setLoading(false);
    }
  }, [userId]);  // 依赖于 userId，当 userId 改变时重新请求

  // 如果正在加载
  if (loading) {
    return <div>Loading...</div>;
  }

  // 错误处理
  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      <ul>
        {followers.map((follower) => (
          <div key={follower.userId}>
            <User user={follower} /> {/* 渲染每个粉丝 */}
          </div>
        ))}
      </ul>
    </div>
  );
};

export default MyFollowers;
